<template>
  <div id="doAnswerPage">
    <a-card v-if="questionContent.length > 0">
      <!-- {{ currentQuestion }} <br>
      {{ answerList }} -->
      <h1>{{ app.appName }}</h1>
      <p>{{ app.appDesc }}</p>
      <h2 style="margin-bottom: 16px;">{{ current }}、 {{ currentQuestion?.title }}</h2>
      <!-- 选项列表 -->
      <div>
        <a-radio-group @change="doRadioChange" direction="vertical" v-model="currentAnswer" :options="questionOptions" />
      </div>
      <!-- 按钮 -->
      <div style="margin-top: 24px">
        <a-space size="large">
          <a-button
            type="primary"
            circle
            v-if="current < questionContent.length"
            :disabled="!currentAnswer"
            @click="current += 1"
          >
            下一题
          </a-button>
          <a-button
            type="primary"
            v-if="current === questionContent.length"
            circle
            :loading="submitting"
            :disabled="!currentAnswer"
            @click="doSubmit"
          >
            {{ submitting ? "分析中" : "查看结果" }}
          </a-button>
          <a-button v-if="current > 1" circle @click="current -= 1">
            上一题
          </a-button>
        </a-space>
      </div>
    </a-card>
    <a-card v-else>
      <h2>该应用还没有添加题目,去别的应用看看吧~</h2>
      <a-button size="large" type="primary" @click="$router.push('/')">返回首页</a-button>
    </a-card>
  </div>
  
</template>

<script setup lang="ts">
import {  ref, watchEffect, computed, reactive } from 'vue';
import API from '@/api'
import message from '@arco-design/web-vue/es/message'
import { useRouter, useRoute } from 'vue-router';
import { getAppVoByIdUsingGet } from '@/api/appController';
import { listQuestionVoByPageUsingPost } from '@/api/questionController';
import { addUserAnswerUsingPost } from "@/api/userAnswerController";

const router = useRouter()
// 查看结果按钮状态
const submitting = ref(false);
interface Props {
  appId: string
}

const props = withDefaults(defineProps<Props>(), {
  appId: ()  => {
    return ''
  }
})

// 应用信息
const app =ref<API.AppVO>({})

// 题目内容结构
const questionContent = ref<API.QuestionContentDTO[]>([])

// 当前展示的题目序号 1开始
const  current = ref(1)

// 当前题目
const currentQuestion = ref<API.QuestionContentDTO>({})

// 当前题目选项
const questionOptions:any = computed(() => {
  return currentQuestion.value?.options 
  ?currentQuestion.value.options.map(option => {
    return {
      label: `${option.key} . ${option.value}`,
      value: option.key
    }
  }) : []
})

// 当前答案
const currentAnswer = ref('')

// 回答列表
const answerList = reactive<string[]>([])

watchEffect(() => { 
  // current从1开始 
  // 序号变化 对应的当前问题和当前答案也变化
  currentQuestion.value = questionContent.value[current.value - 1]
  currentAnswer.value = answerList[current.value - 1] 
})



// 获取题目 app
const loadData = async () => {
  if(!props.appId) {
    return
  }
  // 获取app信息
  let res:any = await getAppVoByIdUsingGet({
    id: props.appId as any,
  })
  if(res.data.code === 0) {
    app.value = res.data.data as any;
  } else {
    message.error('获取应用失败:' +res.data.message)
  }    


  // 获取最新的一条题目记录
  res = await listQuestionVoByPageUsingPost({
    appId: props.appId as any,
    current: 1,
    pageSize: 1,
    sortField: 'createTime',
    sortOrder: 'descend'
  })
  if(res.data.code === 0 && res.data.data?.records) {
      questionContent.value = res.data.data?.records[0].questionContent || []
  } else {
    message.error('获取题目失败:' +res.data.message)
  }
}
watchEffect(() => { 
  loadData()
})

// 用户进行了选择
const doRadioChange = (val: any) => {
  answerList[current.value - 1] = val
}

// // 提交表单
const doSubmit = async ({value, errors}:any) => {
  if(!props.appId || !answerList) return
  submitting.value = true
  const res = await addUserAnswerUsingPost({
    appId: props.appId as any,
    choices: answerList
  })
  if(res.data.code === 0 && res.data.data) {
    // 返回一个提交的结果id res.data.data
    router.push(`/answer/result/${res.data.data}`)
  } else {
    message.error("提交答案失败，" + res.data.message)
  }
  submitting.value = false
}

</script>
<style lang="scss" scoped>
#doAnswerPage {
  width: 40vw;
  padding: 20px;
  border-radius: 10px;
  background: rgba(255,255,255,.6);
  margin: 0 auto;
  min-width: 400px;
}
</style>